<template>
    <div id="box">
        <!-- 返回按钮 -->
        <van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="$router.back()" fixed />

        <!-- 列表主体 -->
        <van-pull-refresh>
            <van-list>
                <van-cell v-for="good in goodsDatas" :key="good.id" @click="$router.push(`/detail?id=${good.id}`)">
                    <van-card :price="good.sell_price" :desc="good.zhaiyao" :title="good.title" :lazy-load="true"
                        :thumb="good.img_url" />
                </van-cell>

                <!-- 回到顶部 -->
                <van-back-top />
            </van-list>
        </van-pull-refresh>

        <!-- 加载按钮 -->
        <!-- loading type="success" loading-text="加载中..." -->
        <van-button type="primary" :disabled="isFinish" block @click="loadMore" :loading="isLoading"
            :loading-text="isLoading ? '加载中...' : ''">
            {{ isFinish ? '没有更多了' : '加载更多' }}
        </van-button>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getGoodsDatas } from '../api/list.js'
const goodsDatas = ref([])
const page = ref(1)
const limit = ref(5)
let isFinish = ref(false)
let isLoading = ref(false)
// 挂载时发起请求获取图片网址的数据
onMounted(() => {
    _getGoodsDatas()
})

// 构建发送axios请求获取商品数据的函数
const _getGoodsDatas = async () => {
    isLoading.value = true

    let data = await getGoodsDatas(page.value, limit.value)
    if (data.message.length < limit.value) {
        isFinish.value = true
    }
    goodsDatas.value = [...goodsDatas.value, ...data.message]
    isLoading.value = false
}

// 加载更多
const loadMore = () => {
    page.value++
    getGoodsDatas()
}
</script>

<style lang="scss" scoped>
#box {
    padding-top: 48px;
}
</style>